<template>

    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 资源管理
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-table class="table" border
                      :data="tableData"
                      style="width: 100%;margin-bottom: 20px;"
                      row-key="id"
                      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
            >
                <el-table-column
                        v-for="(item,index) in tableList"
                        :key="index"
                        :label="item.label"
                        :prop="item.prop"
                        align="center"
                ></el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button
                                @click="handleEdit(scope.$index, scope.row)"
                                type="text"
                                icon="el-icon-edit"
                        >编辑
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 编辑弹出框 -->
        <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
            <el-form ref="form" :model="form" label-width="70px">
                <el-form-item label="资源名">
                    <el-input v-model="form.dialogResourceName"></el-input>
                </el-form-item>
                <el-form-item label="URL">
                    <el-input v-model="form.dialogUrl"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    import {resourceData, exitResource} from '../../api/resource';

    export default {
        data() {
            return {
                tableList: [{
                    label: "级别",
                    prop: "id"
                },
                    {
                        label: "资源编号",
                        prop: "resourceId"
                    },
                    {
                        label: "资源名",
                        prop: "resourceName"
                    },
                    {
                        label: "路径",
                        prop: "url"
                    }, {
                        label: "父编号",
                        prop: "fid"
                    }
                ],
                tableData: [],
                editVisible: false,
                form: {
                    dialogResourceName: "",
                    dialogUrl: "",
                    dialogResourceId: 1,
                },
            };
        },
        created() {
            this.getData()
        },
        methods: {
            //初始数据
            getData() {
                resourceData().then(res => {
                    this.tableData = res.data;
                })
            },
            //编辑框
            handleEdit(index, row) {
                this.form.dialogResourceName = row.resourceName;
                this.form.dialogUrl = row.url;
                this.form.dialogResourceId = row.resourceId;
                this.editVisible = true;
            },
            //修改数据
            saveEdit() {
                this.editVisible = false;
                exitResource(this.form).then(res => {
                    this.getData();
                });

            }
        }
    }
</script>
<style scoped>
    .table {
        width: 100%;
        font-size: 14px;
    }
</style>
